<template>
  <div class="controller-bar">
    <div class="controller-bar-item">
      <a-space>
        <span style="color:#ffffff80">可选参数说明：summary 代码描述，name 接口名称，url 链接名称，method 方法名称</span>
        <span class="pointer-span" @click="getVal">
          <SaveOutlined />
        </span>
      </a-space>
    </div>
  </div>
  <div id="monaco">
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, onUnmounted, watch } from "vue";
import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
import "monaco-editor/esm/vs/basic-languages/typescript/typescript";
import "monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution";
// import "monaco-editor/esm/vs/editor/contrib/find/findController.js";
import { SaveOutlined } from "@ant-design/icons-vue";
import mitt from "mitt";

const emitter = mitt();
export default defineComponent({
  components: {
    SaveOutlined,
  },
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  setup(props, { emit }) {
    onMounted(() => {
      const monacoHtml = document.getElementById("monaco") as HTMLElement;
      const monacoInstance = monaco.editor.create(monacoHtml, {
        value: "/**\r\n * {{ summary }}\r\n * @param {{ queryInterfaceName }}\r\n * @return {{ respInterfaceName }}\r\n */\r\nexport const {{ name }}: AxiosRequestConfig = {\r\n    url: `${baseUrl}{{ url }}`,\r\n    method: '{{ method }}'\r\n}",
        language: "typescript",
        // theme: "vs-dark",
      });

      emitter.on("get-val", () => {
        emit("save", monacoInstance.getValue());
      });

      watch(
        () => props.value,
        (val: string) => {
          monacoInstance.setValue(val);
        }
      );

      onUnmounted(() => {
        monacoInstance.dispose();
        emitter.all.clear();
      }); //使用完成销毁实例
    });

    function getVal() {
      emitter.emit("get-val");
    }

    return {
      getVal,
    };
  },
});
</script>
<style lang="less" scoped>
#monaco {
  border: 1px solid #323232;
  box-sizing: border-box;
}
.controller-bar {
  height: 32px;
  background-color: #3c3f41;
  border-bottom: 1px solid #323232;
  .controller-bar-item {
    float: right;
    padding-right: 20px;
    display: flex;
    align-items: center;
    height: 32px;
    color: #ffffff;
    font-size: 18px;
    .pointer-span {
      cursor: pointer;
    }
  }
}
#monaco {
  height: calc(100vh - 32px);
}
</style>